import './Scss/ScheduleSchedule.scss'
import { Http } from '../../../../Common/Api'
import { Column } from '@ant-design/plots'
import { useState, useEffect, useRef } from 'react'
import { useSize, useRequest, useBoolean } from 'ahooks'
import { CommonSmallTitle } from '../../Common/Other/SmallTitle'
import { LargeScreenTablesModal } from '../../Common/LargeScreen/LargeScreenModal'

const One = ({ TabsActive, Date }) => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)

    const [data, setData] = useState([])
    const [Charts, setCharts] = useState()
    useEffect(() => {
        if (size) {
            const { width, height } = size
            const config = {
                autoFit: false,
                width,
                height,
                maxColumnWidth: 14,
                appendPadding: 24,
                data,
                isStack: true,
                xField: 'type',
                yField: 'value',
                seriesField: 'name',
                color: ['#B2FBFD', '#FAD688'],
                legend: {
                    layout: 'horizontal',
                    position: 'top-right',
                    offsetY: 24,
                    itemName: { style: { fill: '#B2FBFD', fontSize: 12 } },
                },
                xAxis: {
                    label: { style: { fill: '#B2FBFD' } },
                    line: { style: { stroke: '#B2FBFD' } },
                    tickLine: { style: { stroke: '#B2FBFD' } },
                },
                yAxis: {
                    title: {
                        text: '百分比',
                        position: 'end',
                        autoRotate: false,
                        offset: 50,
                        style: { fill: '#B2FBFD' },
                    },
                    tickCount: 5,
                    label: { style: { fill: '#B2FBFD' }, formatter: e => e + '%' },
                    grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
                },
            }
            setCharts(config)
        }
    }, [size, data])

    const { runAsync: getGetEngineeringPerByYear } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let data = []
            list.forEach(({ uuid, tableName, formerYearPer, thisYearPer }) => {
                data = [
                    ...data,
                    { name: '往年完成', type: tableName, value: formerYearPer, uuid },
                    { name: '本年完成', type: tableName, value: thisYearPer, uuid },
                ]
            })
            setData(data)
        },
    })

    const { runAsync: getGetEngineeringPerByYearMonth } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let data = []
            list.forEach(({ uuid, tableName, formerMonthPer, thisMonthPer }) => {
                data = [
                    ...data,
                    { name: '往月完成', type: tableName, value: formerMonthPer, uuid },
                    { name: '本月完成', type: tableName, value: thisMonthPer, uuid },
                ]
            })
            setData(data)
        },
    })

    const { runAsync: getGetEngineeringPerByYearMonthDay } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let data = []
            list.forEach(({ uuid, tableName, formerDayPer, thisDayPer }) => {
                data = [
                    ...data,
                    { name: '往日完成', type: tableName, value: formerDayPer, uuid },
                    { name: '本日完成', type: tableName, value: thisDayPer, uuid },
                ]
            })
            setData(data)
        },
    })

    useEffect(() => {
        if (TabsActive === '1')
            getGetEngineeringPerByYear({ url: 'getGetEngineeringPerByYear', data: { OrgType: 'A', StatDate: Date } })
        if (TabsActive === '2')
            getGetEngineeringPerByYearMonth({
                url: 'getGetEngineeringPerByYearMonth',
                data: { OrgType: 'A', StatDate: Date },
            })
        if (TabsActive === '3')
            getGetEngineeringPerByYearMonthDay({
                url: 'getGetEngineeringPerByYearMonthDay',
                data: { OrgType: 'A', StatDate: Date },
            })
    }, [
        Date,
        TabsActive,
        getGetEngineeringPerByYear,
        getGetEngineeringPerByYearMonth,
        getGetEngineeringPerByYearMonthDay,
    ])

    const [TowModal, { setTrue, setFalse }] = useBoolean(false)
    const [Parameter, setParameter] = useState()

    return (
        <CommonSmallTitle className="ItemTitle" title="形象进度A标" flex={1} style={{ marginBottom: 16 }}>
            <div className="Charts" ref={ChartsBox}>
                {Charts && (
                    <Column
                        {...Charts}
                        onReady={plot =>
                            plot.on('plot:click', e => {
                                const { x, y } = e
                                const [{ data }] = plot.chart.getTooltipItems({ x, y })
                                setParameter({
                                    uuid: data.uuid,
                                    type: 'LargeScreeTable',
                                    classification: 'ImageProgressPopulation',
                                })
                                setTrue()
                            })
                        }
                    />
                )}
            </div>
            {TowModal && Parameter && (
                <LargeScreenTablesModal
                    className="ItemTitle"
                    Off={setFalse}
                    title="形象进度统计"
                    parameter={Parameter}
                />
            )}
        </CommonSmallTitle>
    )
}

const Two = ({ TabsActive, Date }) => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)

    const [data, setData] = useState([])
    const [Charts, setCharts] = useState()
    useEffect(() => {
        if (size) {
            const { width, height } = size
            const config = {
                autoFit: false,
                width,
                height,
                maxColumnWidth: 14,
                appendPadding: 24,
                data,
                isStack: true,
                xField: 'type',
                yField: 'value',
                seriesField: 'name',
                color: ['#B2FBFD', '#FAD688'],
                legend: {
                    layout: 'horizontal',
                    position: 'top-right',
                    offsetY: 24,
                    itemName: { style: { fill: '#B2FBFD', fontSize: 12 } },
                },

                xAxis: {
                    label: { style: { fill: '#B2FBFD' } },
                    line: { style: { stroke: '#B2FBFD' } },
                    tickLine: { style: { stroke: '#B2FBFD' } },
                },
                yAxis: {
                    title: {
                        text: '百分比',
                        position: 'end',
                        autoRotate: false,
                        offset: 50,
                        style: { fill: '#B2FBFD' },
                    },
                    tickCount: 5,
                    label: { style: { fill: '#B2FBFD' } },
                    grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
                },
            }
            setCharts(config)
        }
    }, [size, data])

    const { runAsync: getGetEngineeringPerByYear } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let data = []
            list.forEach(({ uuid, tableName, formerYearPer, thisYearPer }) => {
                data = [
                    ...data,
                    { name: '往年完成', type: tableName, value: formerYearPer, uuid },
                    { name: '本年完成', type: tableName, value: thisYearPer, uuid },
                ]
            })
            setData(data)
        },
    })

    const { runAsync: getGetEngineeringPerByYearMonth } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let data = []
            list.forEach(({ uuid, tableName, formerMonthPer, thisMonthPer }) => {
                data = [
                    ...data,
                    { name: '往月完成', type: tableName, value: formerMonthPer, uuid },
                    { name: '本月完成', type: tableName, value: thisMonthPer, uuid },
                ]
            })
            setData(data)
        },
    })

    const { runAsync: getGetEngineeringPerByYearMonthDay } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let data = []
            list.forEach(({ uuid, tableName, formerDayPer, thisDayPer }) => {
                data = [
                    ...data,
                    { name: '往日完成', type: tableName, value: formerDayPer, uuid },
                    { name: '本日完成', type: tableName, value: thisDayPer, uuid },
                ]
            })
            setData(data)
        },
    })

    useEffect(() => {
        if (TabsActive === '1')
            getGetEngineeringPerByYear({ url: 'getGetEngineeringPerByYear', data: { OrgType: 'B', StatDate: Date } })
        if (TabsActive === '2')
            getGetEngineeringPerByYearMonth({
                url: 'getGetEngineeringPerByYearMonth',
                data: { OrgType: 'B', StatDate: Date },
            })
        if (TabsActive === '3')
            getGetEngineeringPerByYearMonthDay({
                url: 'getGetEngineeringPerByYearMonthDay',
                data: { OrgType: 'B', StatDate: Date },
            })
    }, [
        Date,
        TabsActive,
        getGetEngineeringPerByYear,
        getGetEngineeringPerByYearMonth,
        getGetEngineeringPerByYearMonthDay,
    ])

    const [TowModal, { setTrue, setFalse }] = useBoolean(false)
    const [Parameter, setParameter] = useState()

    return (
        <CommonSmallTitle className="ItemTitle" title="形象进度B标" flex={1}>
            <div className="Charts" ref={ChartsBox}>
                {Charts && (
                    <Column
                        {...Charts}
                        onReady={plot =>
                            plot.on('plot:click', e => {
                                const { x, y } = e
                                const [{ data }] = plot.chart.getTooltipItems({ x, y })
                                setParameter({
                                    uuid: data.uuid,
                                    type: 'LargeScreeTable',
                                    classification: 'ImageProgressPopulation',
                                })
                                setTrue()
                            })
                        }
                    />
                )}
            </div>
            {TowModal && Parameter && (
                <LargeScreenTablesModal
                    className="ItemTitle"
                    Off={setFalse}
                    title="形象进度统计"
                    parameter={Parameter}
                />
            )}
        </CommonSmallTitle>
    )
}

export const ScheduleSchedule001 = ({ TabsActive, Date }) => {
    return (
        <div className="ScheduleSchedule001">
            <One TabsActive={TabsActive} Date={Date} />
            <Two TabsActive={TabsActive} Date={Date} />
        </div>
    )
}

const Thr = ({ TabsActive, Date, groupId, title }) => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const APIData = { groupId, StatDate: Date }
    const [data, setData] = useState([])
    const [Charts, setCharts] = useState()
    const [TowModal, { setTrue, setFalse }] = useBoolean(false)
    const [Parameter, setParameter] = useState()

    useEffect(() => {
        if (size) {
            const { width, height } = size
            const config = {
                autoFit: false,
                width,
                height,
                maxColumnWidth: 14,
                appendPadding: 24,
                data,
                isStack: true,
                xField: 'type',
                yField: 'value',
                seriesField: 'name',
                color: ['#B2FBFD', '#FAD688'],
                legend: {
                    layout: 'horizontal',
                    position: 'top-right',
                    offsetY: 24,
                    itemName: { style: { fill: '#B2FBFD', fontSize: 12 } },
                },
                xAxis: {
                    label: { style: { fill: '#B2FBFD' } },
                    line: { style: { stroke: '#B2FBFD' } },
                    tickLine: { style: { stroke: '#B2FBFD' } },
                },
                yAxis: {
                    title: {
                        text: '百分比',
                        position: 'end',
                        autoRotate: false,
                        offset: 50,
                        style: { fill: '#B2FBFD' },
                    },
                    tickCount: 5,
                    label: { style: { fill: '#B2FBFD' }, formatter: e => e + '%' },
                    grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
                },
                scrollbar: {
                    type: 'horizontal',
                    height: 4,
                    categorySize: 80,
                    style: {
                        trackColor: 'rgba(178, 251, 253, 0.2)',
                        thumbColor: 'rgba(178, 251, 253, 1)',
                        thumbHighlightColor: '#367EF2',
                    },
                },
            }
            setCharts(config)
        }
    }, [size, data])

    const { runAsync: getGetEngineeringPerByYear } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let data = []
            list.forEach(({ uuid, tableName, formerYearPer, thisYearPer }) => {
                data = [
                    ...data,
                    { name: '往年完成', type: tableName, value: formerYearPer, uuid },
                    { name: '本年完成', type: tableName, value: thisYearPer, uuid },
                ]
            })
            setData(data)
        },
    })

    const { runAsync: getGetEngineeringPerByYearMonth } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let data = []
            list.forEach(({ uuid, tableName, formerMonthPer, thisMonthPer }) => {
                data = [
                    ...data,
                    { name: '往月完成', type: tableName, value: formerMonthPer, uuid },
                    { name: '本月完成', type: tableName, value: thisMonthPer, uuid },
                ]
            })
            setData(data)
        },
    })

    const { runAsync: getGetEngineeringPerByYearMonthDay } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let data = []
            list.forEach(({ uuid, tableName, formerDayPer, thisDayPer }) => {
                data = [
                    ...data,
                    { name: '往日完成', type: tableName, value: formerDayPer, uuid },
                    { name: '本日完成', type: tableName, value: thisDayPer, uuid },
                ]
            })
            setData(data)
        },
    })

    const [TabsActiveList] = useState({
        1: () => getGetEngineeringPerByYear({ url: 'getGetEngineeringPerByYear', data: APIData }),
        2: () => getGetEngineeringPerByYearMonth({ url: 'getGetEngineeringPerByYearMonth', data: APIData }),
        3: () => getGetEngineeringPerByYearMonthDay({ url: 'getGetEngineeringPerByYearMonthDay', data: APIData }),
    })
    useEffect(() => {
        TabsActiveList[TabsActive]()
    }, [TabsActive, TabsActiveList])

    return (
        <CommonSmallTitle className="ItemTitle" title={title} flex={1}>
            <div className="Charts" ref={ChartsBox}>
                {Charts && (
                    <Column
                        {...Charts}
                        onReady={plot =>
                            plot.on('plot:click', e => {
                                const { x, y } = e
                                const [{ data }] = plot.chart.getTooltipItems({ x, y })
                                setParameter({
                                    uuid: data.uuid,
                                    type: 'LargeScreeTable',
                                    classification: 'ImageProgressPopulation',
                                })
                                setTrue()
                            })
                        }
                    />
                )}
            </div>
            {TowModal && Parameter && (
                <LargeScreenTablesModal
                    className="ItemTitle"
                    Off={setFalse}
                    title="形象进度统计"
                    parameter={Parameter}
                />
            )}
        </CommonSmallTitle>
    )
}

export const ScheduleSchedule002 = ({ TabsActive, Date, length, title }) => {
    return (
        <div className="ScheduleSchedule002">
            {Array.from({ length }, (_, index) => index).map(item => (
                <Thr key={item} TabsActive={TabsActive} Date={Date} groupId={item + 1} title={title[item]} />
            ))}
        </div>
    )
}

export const ScheduleSchedule003 = ({ TabsActive, Date, length, title }) => {
    return (
        <div className="ScheduleSchedule003">
            {Array.from({ length }, (_, index) => index).map(item => (
                <Thr key={item} TabsActive={TabsActive} Date={Date} groupId={item + 1} title={title[item]} />
            ))}
        </div>
    )
}
